<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查漏补缺</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="root"></div>
  <script>
    const app = Vue.createApp({
        /**
         * v-once只渲染一次，即使数据改变
         * ref 实际上是获取dom节点，或者获取组件的引用
         *  provide:{}/provide(){return {}}/inject:[] 跨组件值传递
         */
        template:`
          <child/>
        `,
        provide(){
            return {
                count:this.count
            }
        },
        data(){
            return {count:1}
        },
        methods:{
            handleClick(){
                this.count ++
            }
        },
        mounted(){
            //this.$refs.count.innerText="Hello"
            //console.log(this.$refs.count)
        }
    });
    app.component("child",{
        template: `<child-child/>`
    })
    app.component("child-child",{
        inject:['count'],
        template:`
        <div>{{count}}</div>
        `
    })
    const vm = app.mount("#root")
  </script>
</body>
</html>